<template>
	<view class="jiao_yi_box">
		<view class="cart_left_box">
			<view class="addr__teb">
				<text class="addr vertical_text fs_36_i mn">ᠬᠥᠬᠡᠬᠣᠲᠠ</text>
				<text class="teb vertical_text fs_24">-12 <text class="teb_icon">℃</text> </text>
			</view>
			
			<!-- 分类 -->
			<view class="cate_item_box text-center" @click="handleFilter('category')">
				<text class="cate_name vertical_text mn fs_36 text-center" :class="{ mainColor: filterVal == 'category' }">{{ formatMon1('ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ᠎') }} </text>
			</view>
			<view class="cate_item_box" @click="handleFilter('price')">
				<text class="cate_name vertical_text mn fs_36" :class="{ mainColor: filterVal == 'price' }">ᠦᠨ᠎ᠡ</text>
			</view>
			<view class="cate_item_box" @click="handleFilter('time')">
				<text class="cate_name vertical_text mn fs_36" :class="{ mainColor: filterVal == 'time' }">ᠰᠠᠷ᠎ᠠ</text>
			</view>
		</view>
		
		<view class="cart_right_box">
			<scroll-view class="full" scroll-y="true" lower-threshold="50" @scrolltolower="handlePagenation()">
				<view class="pro_item_box" v-for="(item, index) in productList" :key="index" @click="goToProductDetail(item.id)">
					<image :src="item.imageList[0].url" mode=""></image>
					
					<view class="cate__price">
						<text class="cate vertical_text mn fs_36">{{ formatAnimalMonName(item.breedingType.value) }}</text>
						
						<text class="price vertical_text mn fs_30 color_ff3c20">
							<text class="price_icon">￥</text> {{ item.price || 'xxxx' }}
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 筛选弹出框 -->
		<view class="filter_box" v-if="isFilter">
			<view class="hide_icon_box">
				<i class="iconfont icon-yuyinguanbi mainColor fs_52_i" @click="hideFilter"></i>
			</view>
			
			<!-- 按分类筛选 -->
			<view class="filter_by overflow_hidden" v-if="filterVal == 'category'">
				<text class="vertical_text mn p_10 float_left fs_40">ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ᠎ᠢᠶᠠᠷ ᠱᠢᠯᠢᠬᠦ</text>
				
				<view class="select_box float_left">
					<view class="select_item vertical_text mn border_radius_3 border_1_s_000 mb_5" v-for="(item, index) in categoryList" :key="index">
						{{ item.name }}
					</view>
				</view>
				
				<view class="sub__clear_box float_right">
					<view class="clear_box  bgc_3372e2 color_fff border_radius_6">
						<text class="vertical_text mn">ᠴᠡᠪᠡᠷᠯᠡᠬᠦ</text> 
					</view>
					
					<view class="sub_box vertical_text mn bgc_1c9aa0 color_fff border_radius_6">
						<text class="vertical_text mn">ᠱᠢᠯᠢᠬᠦ</text> 
					</view>
				</view>
			</view>
			
			<!-- 按价格筛选 -->
			<view class="filter_by overflow_hidden" v-if="filterVal == 'price'">
				<text class="vertical_text mn p_10 float_left fs_40">ᠦᠨ᠎ᠡ᠎ᠪᠡᠷ ᠱᠢᠯᠢᠬᠦ</text>
				
				<view class="select_box float_left text_center">
					<input type="text" v-model="filterData.priceMin" placeholder="xxx"> ~
					<input type="text" v-model="filterData.priceMax" placeholder="yyy"> 
				</view>
				
				<view class="sub__clear_box float_right">
					<view class="clear_box vertical_text mn bgc_3372e2 color_fff border_radius_6">
						<text class="vertical_text mn" @click="clearFilterPrice()">ᠴᠡᠪᠡᠷᠯᠡᠬᠦ</text> 
					</view>
					
					<view class="sub_box vertical_text mn bgc_1c9aa0 color_fff border_radius_6">
						<text class="vertical_text mn" @click="getProductList()">ᠱᠢᠯᠢᠬᠦ</text>
					</view>
				</view>
			</view>
			
			<!-- 按月份筛选 -->
			<view class="filter_by overflow_hidden" v-if="filterVal == 'time'">
				<text class="vertical_text mn p_10 float_left fs_40">ᠰᠠᠷ᠎ᠠ᠎ᠪᠠᠷ ᠱᠢᠯᠢᠬᠦ</text>
				
				<view class="select_box float_left text_center">
					<input type="text" v-model="filterData.ageMonthMin" placeholder="xxx"> ~
					<input type="text" v-model="filterData.ageMonthMax" placeholder="yyy"> 
				</view>
				
				<view class="sub__clear_box float_right">
					<view class="clear_box vertical_text mn bgc_3372e2 color_fff border_radius_6">
						<text class="vertical_text mn" @click="clearFilterAgeMonth()">ᠴᠡᠪᠡᠷᠯᠡᠬᠦ</text> 
					</view>
					
					<view class="sub_box vertical_text mn bgc_1c9aa0 color_fff border_radius_6">
						<text class="vertical_text mn" @click="getProductList()">ᠱᠢᠯᠢᠬᠦ</text>  
					</view>
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				isFilter: false,
				filterVal: 0,
				
				productList: [],
				filterData: {
					ageMonthMin: '',
					ageMonthMax: '',
					weightMin: '',
					weightMax: '',
					lengthMin: '',
					lengthMax: '',
					widthMin: '',
					widthMax: '',
					heightMin: '',
					heihtMax: '',
					priceMin: '',
					priceMax: '',
					current: 1,
					size: 16
				},
	
				categoryList: [
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 1' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 2' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 3' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 4' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 5' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 6' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 7' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 8' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 9' },
					{ name: 'ᠰᠣᠩᠭᠤᠯᠲᠠ 10' },
				],
				isPagenation: false,
				productTotal: 0 
			};
		},
		
		onShow() {
			this.isFilter = false
		},
		
		mounted() {
			uni.$on('getProductList', () => {
				if (!this.productList.length) {
					uni.showLoading({
						title: '加载中',
					})
					this.filterData.current = 1
					this.getProductList()
				}
			})
		},
		
		methods: {	
			// 获取商品列表
			getProductList() {
				NET.request(API.getProductList, this.filterData, 'GET')
				.then(res => {
					// console.log('获取商品列表 : ', res)
					if (res.code == 200) {
						uni.hideLoading()
						this.productList = [...this.productList, ...res.data]
						this.productTotal = res.total
					}
				})
				.catch(err => {
					console.error('获取商品列表失败！', err)
				})
			},
			
			// 分页获取 
			handlePagenation() {
				if (!this.isPagenation) {
					if (this.productList.length < this.productTotal) {
						this.isPagenation = true
						this.filterData.current ++
						this.getProductList()
						setTimeout(() => {this.isPagenation = false}, 500)
					} else {
						uni.showToast({
							title: '数据到底了！', icon: 'none'
						})
					}
				} else {
					return false
				}
			},
			
			// 点击 交易页面中的图片
			handleClickCategoryItem(index) {
				// 跳转到视频详情页面
				uni.navigateTo({
					url: '/subcontract/detail-video/detail-video',
				})
			},
			
			// 点击交易页面中的 【分类】按钮
			handleFilter(val) {
				this.filterVal = val
				this.isFilter = true
			},
			
			// 清空筛选价格
			clearFilterPrice() {
				this.filterData.priceMin = ''
				this.filterData.priceMax = ''
			},
			
			// 清空筛选月份
			clearFilterAgeMonth() {
				this.filterData.ageMonthMin = ''
				this.filterData.ageMonthMax = ''
			},
			
			// 隐藏筛选框
			hideFilter() {
				this.isFilter = false
				this.filterVal = ''
			},
			
			// 跳转到商品详情页
			goToProductDetail(id) {
				uni.navigateTo({
					url: `/subcontract/product-detail/index?id=${id}`,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.jiao_yi_box {
		width: 100%;
		height: 100%;
		padding: 15rpx;
		
		.cart_left_box {
			width: 10%;
			float: left;
			
			.addr__teb {
				height: 70rpx;
				padding: 20rpx;
				border-radius: 14rpx;
				background-color: #fff;
				position: relative;
				
				.addr, .teb {
					padding: 4rpx;
					position: absolute;
					top: 10rpx;
					font-size: 24rpx;
				}
				.addr { left: 0rpx; font-size: 32rpx; }
				
				.teb { 
					right: 0; 
					
					.teb_icon {
						padding-top: 6rpx;
						transform: rotateY(180deg);
					}
				}
			}
			
			.cate_item_box {
				width: 80rpx;
				height: 90rpx;
				padding: 20rpx 0;
				border-radius: 14rpx;
				background-color: #fff;
				margin-top: 20rpx;
				box-sizing: border-box;
				position: relative;
				
				.cate_name {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
				
		.cart_right_box {
			width: 89.8%;
			height: 100%;
			overflow-y: auto;
			float: left;
			box-sizing: border-box;
			padding: 0 20rpx;
			
			.pro_item_box {
				width: 49%;
				height: 200rpx;
				border-radius: 14rpx;
				background-color: #888;
				float: left;
				white-space: normal;
				position: relative;
				margin-bottom: 10rpx;
				
				image { width: 75%; height: 100%; border-radius: 16rpx; }
				
				.cate__price {
					width: 25%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					background-color: #ccc;
					border-bottom-right-radius: 14rpx;
					border-top-right-radius: 14rpx;
										
					.cate, .price { position: absolute; top: 10rpx;}
					.cate { left: 10rpx; }
					.price { 
						right: -5rpx; 
						.price_icon {
							transform: rotateY(180deg);
						} 
					}
				}
			}
		
			.pro_item_box:nth-child(odd) {
				margin-right: 10rpx;
			}
		}
				
		.filter_box {
			width: 70%;
			height: 70%;
			background-color: #fff;
			border-radius: 14rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 10rpx;
			box-sizing: border-box;
			
			.hide_icon_box { 
				width: 100%; 
				height: 70rpx; 
				position: relative; 
				
				i { 
					position: absolute; 
					top: 10rpx; 
					right: 10rpx; 
				}
			}
		
			.filter_by {
				width: 100%;
				height: calc(100% - 70rpx);
				
				.select_box {
					width: 50%;
					height: 100%;
					
					display: flex;
					flex-direction: column;
					// justify-content: flex-start;
					flex-wrap: wrap;
					
					.select_item {
						width: 60rpx;
						padding: 12rpx 0 12rpx 4rpx;
						box-sizing: border-box;
					}
				}
			}
			
			.sub__clear_box {
				width: 80rpx;
				height: 99%;
				position: relative;
				margin-right: 10rpx;
				
				.clear_box {
					width: 100%;
					height: 140rpx;
					position: absolute; 
					top: 80rpx; 
					left: 50%; 
					transform: translateX(-50%);
					
					text { 
						position: absolute;
						top: 50%; 
						left: 50%; 
						transform: translate(-50%, -50%);
					}
				}
				
				.sub_box { 
					width: 100%;
					height: 140rpx;
					position: absolute;
					bottom: 80rpx; 
					left: 50%; 
					transform: translateX(-50%); 
					
					text {
						position: absolute;
						top: 50%; 
						left: 50%; 
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
</style>